<template>
  <div class="content">

    <el-row class="bgW">
      <el-col :span="20">
        <!--检索条件-->
        <el-form class="search" :inline="true" label-suffix="：" size="mini" :model="search">
          <el-form-item label="品项名称">
            <el-input
              v-model="search.name"
              maxlength="30"
              placeholder="请输入品项名称"
            />
          </el-form-item>
          <el-form-item label="是否禁用">
            <el-select v-model="search.status" placeholder="请选择">
              <el-option
                v-for="item in options.statusList"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="创建时间">
             <el-date-picker
                v-model="search.date"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                value-format="yyyy-MM-dd">
              </el-date-picker>
          </el-form-item>
          <el-form-item label="类目选择">
            <el-cascader
              v-model="search.type"
              :options="options.typeList"
              :props="{ checkStrictly: true }"
            />
          </el-form-item>
        </el-form>
      </el-col>
      <el-col :span="4" style="text-align: right;">
        <el-button type="primary" icon="el-icon-search" size="mini" @click="getList('search')">搜索</el-button>
        <el-button type="primary" size="mini" @click="getList('resetForm')">重置</el-button>
      </el-col>
    </el-row>
    <div>
      <el-button  type="primary"  size="mini" @click="getList('export')">导出数据</el-button>
      <el-button  type="primary"  size="mini" @click="goAdd" v-if="userInfo.id == 1  || userInfo.id == 1821">新增品项</el-button>
    </div>
    <div class="accountCon">
      <!--列表-->
      <el-row>
        <el-col :span="24">
          <el-table
            :data="list"
            size="small"
            border
            :cell-style="$style.cellStyle"
            :header-cell-style="$style.rowClass"
          >
            <ElTableColumn label="序号" type="index" width="55" />
            <ElTableColumn label="品项名称"  prop="name" />
            <ElTableColumn label="新增时间" prop="create_time" />
            <ElTableColumn label="一级类目"  prop="type_one_name" />
            <ElTableColumn label="二级类目"  prop="type_two_name" />
            <ElTableColumn label="三级类目"  prop="type_three_name" />
            <ElTableColumn label="组合人"  prop="creator_name" />
            <ElTableColumn label="组合价格"  prop="price" />
            <ElTableColumn label="是否禁用">
              <template slot-scope="{ row }">
                <div v-if="row.status == 1">否</div>
                <div v-if="row.status == 2">是</div>
              </template>
            </ElTableColumn>
            <!-- <ElTableColumn label="适用类型"  prop="create_time" /> -->
            <ElTableColumn label="操作"  fixed="right">
              <template  slot-scope="{ row }" >
                <span class="theme " @click="tapBtn('read',row)"> 查看</span>
                <span class="theme " @click="tapBtn('edit',row)"> 编辑</span>
              </template>  
            </ElTableColumn>
          </el-table>
          <pagination
            class="page tc mt10"
            :total="page.total"
            :page.sync="page.page"
            :limit.sync="page.pagesize"
            @pagination="getList"
          />
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import pagination from '@/components/Pagination'
import { getProductItem,goodsTypeList} from '@/api/goods';
import { convertToTreeData } from '@/utils/constants';
import { mapGetters } from 'vuex'
class Page {
  total = 0;
  page = 1;
  pagesize = 10
}
class Search {
  name = ''; 
  status = ''; 
  date = [];
  type = [];
}
class Options {
  typeList = []; // 类目选择
  statusList = [ // 是否禁用
    { label: '是', value: 2 },
    { label: '否', value: 1 }
  ]
}
export default {
  name: 'ClassifyList',
  components: {
    pagination
  },
  data () {
    return {
      search: new Search(), // 检索条件
      page: new Page(), // 分页
      options: new Options(), //选项
      list: [], // 数据展示
    }
  },
  computed: {
    ...mapGetters(['userInfo']),
  },
  mounted () {
    this.getList();
    this.getOptionsList();
  },
  methods: {
      getOptionsList(){
        goodsTypeList({type:'name'}).then(res => {
        this.options.typeList = convertToTreeData(res.data);
      })
    },
    goAdd () {
      this.$router.push({name:'添加品项'})
    },
    // 获取列表
    getList (option) {
     
      if(option === 'resetForm') {this.search = new Search(); this.page = new Page();}
      if(option ==='search') this.page = new Page();
      let params = {
        start : this.search.date[0] || '',
        level : this.search.type.length == 0 ? '' : this.search.type.length,  
        type_id : this.search.type[this.search.type.length-1] || '', 
        end : this.search.date[1] || '',
        name :this.search.name,
        status : this.search.status
      }
      if(option ==='export'){
        params = {...params,is_export:1}
        getProductItem({...params,...this.page}).then(res => {
          window.open(res.url);
        })
      }else{
        getProductItem({...params,...this.page}).then(res => {
          this.list = res.data;
          this.page.total = res.total;
        })
      }
    },
    // 点击详情
    tapBtn (type,row) {
      this.$router.push({name:'添加品项',query:{row:JSON.stringify(row),type:type}})
    },

  }
}
</script>

<style lang="scss" scoped>

.bgW {
  background: #fff;
  border-radius: 3px;
  margin-bottom: 20px;
}
.el-form-item {
  margin: 5px  40px  3px 0 ;
}
.el-input--mini{
  width: 120px; 
}
.el-select{
  width: 120px;
}
.el-date-editor.el-input, .el-date-editor.el-input__inner{
  width: 200px; 
}
.el-form-item{
  margin: 5px 10px 3px 0 ;
}

.accountCon{
    background: #fff;
    padding: 10px 0px 80px;
}
</style>
